<template>
  <div>
    <el-row :gutter="20" class="panel-group" :style="{ marginTop: props.top + 'px' }">
      <el-col
        v-for="(panel, index) in internalPanelList"
        :key="index"
        :xs="12"
        :sm="12"
        :lg="4"
        class="card-panel-col"
      >
        <div
          class="card-panel-hexagon"
          :class="getBackground(index)"
          :style="{ background: panel.color? panel.color :null }"
          @click="handlePanelClick(panel.type)"
        >
          <svg-icon :icon-class="panel.icon" class-name="before-icon" :style="panel.beforeStyle" />
          <svg-icon :icon-class="panel.icon" class-name="after-icon" :style="panel.afterStyle" />
          <div class="card-panel-hexagon-info">{{ panel.title }}</div>
          <count-to
            :start-val="0"
            :end-val="panel.num"
            :decimals="getDecimalPlaces(panel.num)"
            :duration="2000"
            class="card-panel-hexagon-num"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { CountTo } from 'vue3-count-to'


// Props定义
const props = defineProps({
  panelList: {
    type: Array,
    default: () => [
      {
        icon: 'money',
        title: '订单总金额',
        num: 0,
        color: 'linear-gradient(to right, #f88b65, #fea258)',
        type: 'orderTotal',
        beforeStyle: {},
        afterStyle: {}
      }
    ]
  },
  top: {
    type: Number,
    default: 18
  },
  defaultValue: {
    type: Array,
    default: () => []
  }
})

// Emits定义
const emit = defineEmits(['panelClick'])

// 响应式数据
const internalPanelList = ref([])
const backgroundList = [
  'blue', 'green', 'orange', 'purple', 'grey'
]

// 方法定义
const getDecimalPlaces = (value) => {
  const valueStr = value.toString()
  const decimalIndex = valueStr.indexOf('.')
  if (decimalIndex === -1) return 0
  return valueStr.length - decimalIndex - 1
}

const handlePanelClick = (type) => {
  emit('panelClick', type)
}

const getBackground = (index) => {
  return backgroundList[index % backgroundList.length]
}

const getDefaultPanelList = (count) => {
  return Array.from({length: count}, (_, index) => ({
    icon: props.defaultValue[index].icon,
    title: props.defaultValue[index].title,
    num: 100,
    class: getBackground(index),
    type: `placeholder-${ index }`,
    beforeStyle: {
      fontSize: '3.1rem',
      top: '1.8rem',
      left: '4rem'
    },
    afterStyle: {
      fontSize: '2.6rem',
      bottom: '0.4rem',
      right: '1.9rem'
    }
  }))
}

// 监听props变化
watch(() => props.panelList, (newVal) => {
  if (newVal.length) {
    internalPanelList.value = newVal
  }
}, {deep: true, immediate: true})

internalPanelList.value = getDefaultPanelList(5)
</script>

<style lang="scss" scoped>
.panel-group {
  .card-panel-col {
    margin-bottom: 32px;
  }

  .el-col-lg-4 {
    max-width: 20% !important;
    flex: 0 0 20% !important;
  }

  .card-panel-hexagon {
    height: 110px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 10px;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &.blue {
      background: linear-gradient(to right, #3f93fe, #4fb5ff);
    }

    &.green {
      background: linear-gradient(to right, #6cc3ce, #69cb9e);
    }

    &.orange {
      background: linear-gradient(to right, #f88b65, #fea258);
    }

    &.purple {
      background: linear-gradient(to right, #7a86ed, #c5aefe);
    }

    &.grey {
      background: linear-gradient(to right, #5a8bc4, #91b5d5);
    }

    .before-icon {
      position: absolute;
      color: #fff;
      font-size: 38px;
      top: 36px;
      left: 75px;
    }

    .after-icon {
      position: absolute;
      color: rgba(255, 255, 255, 0.2);
      font-size: 35px;
      bottom: 10px;
      right: 35px;
    }

    &-info {
      position: absolute;
      top: 32px;
      left: 144px;
      font-size: 18px;
      font-weight: bold;
    }

    &-num {
      position: absolute;
      top: 60px;
      left: 146px;
      font-size: 22px;
      font-weight: bold;
    }
  }
}
</style>
